<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bg.css"/>
		<script src="js/jquery.js"></script>
	</head>
	<body>
		<div class="bg">
			<h2>背景图</h2>
			<ul>
				<li><img src="img/bg/bg01.jpg"/><p><a class="click" href="#">点击使用</a></p></li>
				<li><img src="img/bg/bg02.jpg"/><p><a class="click" href="#">点击使用</a></p></li>
				<li><img src="img/bg/bg03.jpg"/><p><a class="click" href="#">点击使用</a></p></li>
				<li><img src="img/bg/bg04.jpg"/><p><a class="click" href="#">点击使用</a></p></li>
				<li><img src="img/bg/bg05.jpg"/><p><a class="click" href="#">点击使用</a></p></li>
				<li><img src="img/bg/bg06.jpg"/><p><a class="click" href="#">点击使用</a></p></li>
			</ul>
		</div>
	</body>
</html>
<script>
	$(".bg ul li").on("mouseenter",function(){
		$(this).find("p").show();
	})
	$(".bg ul li").on("mouseleave",function(){
		$(this).find("p").hide();
	})
	$(".click").on("click",function () {
        console.log($(this).parent().siblings().attr("src"));
       var img=$(this).parent().siblings("img").attr("src");
       $.ajax({
		   url:"http://localhost:5656/bgchange",
		   type:"post",
		   data:{
		       bgimg:img
		   }
	   }).then(function (res) {
           console.log(res);
       })
    })
</script>